<template>
  <div class="content">
    <div ref="charts" id="map" style="width: 1000px; height: 800px"></div>
  </div>
  <!-- <div>
    <div>
      <h1>value: {{ vmodel }}</h1>
      <el-date-picker
        v-model="vmodel"
        type="monthrange"
        range-separator="to"
        start_placeholder="开始日期"
        end_placeholder="结束日期"
        @change="cge">
      </el-date-picker>
      <br/><el-tag>{{ show }}</el-tag>
      <br/><el-tag>{{ shoe }}</el-tag>
      <br/><el-button @click="owe">button</el-button>
      <br/>whatever
    </div>
  </div> -->
</template>

<script>
// import echarts from 'echarts';
import * as echarts from 'echarts';
import zhongguo from '@/assets/Map.json'
export default {
  // created () {
  //   this.$nextTick(() => {
  //     this.initCharts();
  //   })
  // },
  mounted () {
    this.initCharts();
  },
  methods: {
    initCharts () {
      let chs = echarts.init(document.getElementById('map'));
      const option = {
        // backgroundColor: "#404a59",
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{b}<br/>{c}',
          alwaysShowContent: false,
          backgroundColor: '#0C121C',
          borderColor: 'rgba(0, 0, 0, 0.16);',
          hideDelay: 100,
          triggerOn: 'mousemove',
          enterable: true,
          testStyle: {
            color: '#DADADA',
            fontSize: '12',
            width: 20,
            height: 30,
            overflow: 'break'
          },
          showDelay: 100
        },
        // geo: {
        //   map: "china",
        //   label: {
        //     normal: {
        //       show: true,
        //       textStyle: {
        //         color: "#fff"
        //       }
        //     },
        //     emphasis: {
        //       textStyle: {
        //         color: "#fff"
        //       }
        //     }
        //   },
        //   itemStyle: {
        //     normal: {
        //       borderColor: "rgba(147, 235, 248, 1)",
        //       borderWidth: 1,
        //       areaColor: {
        //         type: "radial",
        //         x: 0.5,
        //         y: 0.5,
        //         r: 0.8,
        //         colorStops: [
        //           {
        //             offset: 0,
        //             color: "rgba(147, 235, 248, 0)"
        //           },
        //           {
        //             offset: 1,
        //             color: "rgba(147, 235, 248, .2)"
        //           }
        //         ],
        //         globalCoord: false,
        //       },
        //       shadowColor: "rgba(128, 217, 248, 1)",
        //       shadowOffsetX: -2,
        //       shadowOffsetY: 2,
        //       shadowBlur: 10,
        //     },
        //     emphasis: {
        //       areaColor: "#389BB7",
        //       borderWidth: 0,
        //     }
        //   }
        // },
        visualMap: {
          min: 80,
          max: 500,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [{
          name: '名称',
          type: 'map',
          map: 'china',
          label: {emphasis: {textStyle: {color: '#000'}}},
          itemStyle: {
            normal: {
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(147, 235, 248, 0)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(147, 235, 248, .2)'
                  }
                ],
                globalCoord: false
              }
              // shadowColor: "rgba(128, 217, 248, 1)",
              // shadowOffsetX: -2,
              // shadowOffsetY: 2,
              // shadowBlur: 10,
            },
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          },
          data: [
            {name: '北京市', value: 123},
            {name: '上海市', value: 322},
            {name: '福建省', value: 152},
            {name: '河北省', value: 90},
            {name: '四川省', value: 123}
          ]
        }]
      };
      echarts.registerMap('china', zhongguo)
      chs.setOption(option);
    }
  }
};
</script>
